<template>
	<view>
		<!-- 商品列表 -->
		<uni-list>
			<uni-list-item v-for="(p,i) in pager.data" :key="p.lid"
				clickable @click="showDetails(p.lid)">
				<view slot="header" class="product-header">
					<image :src="$url.base+p.pic" mode=""></image>
				</view>
				<view slot="body" class="product-body">
					<text class="title">{{p.title}}</text>
					<text class="price">￥{{p.price}}</text>
					<view class="bottom">
						<uni-tag class="tag" size="mini" v-if="p.is_onsale==='1'" text="促销" type="error"></uni-tag>
						<text class="comments">{{p.sold_count}}条热销评论</text>
						<text class="rate">好评率 100%</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多 -->
		<uni-load-more :status="loadStatus"></uni-load-more>
		<!-- 返回顶部 -->
		<xz-go-top></xz-go-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kw: '', // 上一页面传递的商品查询关键字
				pager: { // 分页器对象
					pno: 0, // 加载的某一页数据
					data: [], // 当前页中已经加载的商品数据
				},
				loadStatus: "more",
				// loadStatus:"loading",
				// loadStatus:"no-more",
			};
		},
		methods: {
			/****** 重点 *******/
			// 加载下一页数据：
			// 1.页面加载时 —— 直接加载第一页
			// 2.触底加载更多 —— 加载下一页、保留前面的数据
			// 3.顶部下拉刷新 —— 清除已加载数据，重新加载第一页
			loadNextPageData() {
				// 即将加载的页号
				let pno = this.pager.pno + 1
				let url = this.$url.productList
				// 向服务器发起异步请求
				uni.showLoading({
					title: '商品数据加载中...'
				})
				// 修改底部提示信息为加载中
				this.loadStatus = 'loading'
				uni.request({
					url,
					data: {
						pno,
						kw: this.kw
					},
					success: res => {
						// console.log(res.data)
						// this.pager=res.data		// 之前的数据会被覆盖
						res.data.data = [...this.pager.data, ...res.data.data]
						// res.data.data = this.pager.data.concat(res.data.data)
						// 老数据后拼接新的数据
						this.pager = res.data	
						// 修改底部提示信息为没有数据，pno>pageCount
						if (res.data.pno >= res.data.pageCount) {
							this.loadStatus = 'no-more'
						}else{
							this.loadStatus = 'more'
						}
					},
					fail: err => {
						console.log(err)
					},
					complete: () => {
						uni.hideLoading()
						uni.stopPullDownRefresh()
					}
				})
			},
			showDetails(pid){
				// 导航跳转到商品详情页
				uni.navigateTo({
					url:'../product-details/product-details?pid='+pid
				})
			},
		},
		onLoad(data) {
			// 页面加载时可以读取到上一页传递的参数
			// console.log(data)  //{"bname":"联想","kw":"联想"} 
			if (data.bname) {
				uni.setNavigationBarTitle({
					title: data.bname + '馆'
				})
			}
			if (data.kw) {
				this.kw = data.kw
			}
			// 1.页面加载时，请求第一页数据
			this.loadNextPageData()
		},
		onPullDownRefresh() {
			// console.log('----下拉刷新----')+
			// 清空所有数据，重新加载第一页数据
			this.pager={
				pno:0,	// 当前加载到第0页
				data:[],		// 当前加载到的数据
			}
			this.loadNextPageData()
		},
		onReachBottom() {
			// console.log('========到底了=========')
			// 滚动到底后，加载下一页数据
			if (this.loadStatus = 'more') {
				this.loadNextPageData()
			}else{
				this.loadStatus = 'loading'
			}
			
		},
	}
</script>

<style lang="scss">
	.product-header {
		image {
			width: 160rpx;
			height: 160rpx;
			margin: -10rpx 10rpx -25rpx -30rpx;
		}
	}

	.product-body {
		display: flex;
		flex-direction: column;

		.title {
			font-size: $uni-font-size-sm;
			margin: 0 0 10rpx 0;
			/* #ifndef APP-NVUE */
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			/* #endif */
			/* #ifdef APP-NVUE */
			lines: 2;
			text-overflow: ellipsis;
			/* #endif */
		}

		.price {
			font-size: $uni-font-size-sm + 1;
			font-weight: bold;
			color: $xz-theme;
			margin: 0 0 10rpx 0;
		}

		.bottom {
			display: flex;
			align-items: center;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;

			.tag {
				// 如果12px文字大，只能使用“缩放、变形”
				transform: scale(.9);
				transform-origin: left center;
				margin: 0 5px 0 0;
			}

			.comments {
				margin: 0 5px 0 0;
			}
		}
	}
</style>
